<template>
  <div class="upload-page" id="upload-page">
    <n-tabs :default-value="0" type="line" @update:value="tabChange">
      <n-tab-pane :name="0" tab="全部"></n-tab-pane>
      <n-tab-pane
        v-for="item in clasifyList"
        :key="item.name"
        :name="item.id"
        :tab="item.name"
      ></n-tab-pane>
    </n-tabs>
    <div class="btns">
      <n-button
        quaternary
        :secondary="item.value === tableInfo.queryForm.status"
        class="btn"
        v-for="(item, index) in statusList"
        :key="index"
        @click="tagChange(item)"
      >
        {{ item.label }}
      </n-button>
    </div>
    <template v-if="tableInfo.tableData.length === 0 && !tableInfo.listLoading">
      <div class="empty">
        <img class="icon" src="@/assets/empty/common.png" alt="" />
      </div>
    </template>
    <template v-else>
      <n-spin :show="tableInfo.listLoading">
        <div class="list">
          <div class="card" v-for="item in tableInfo.tableData" :key="item.id">
            <div class="cover cursor-pointer" @click="handDetail(item)">
              <img class="cover-img" v-lazy="$getImg(item.cover)" alt="" />
              <div class="tag">
                {{ item.book_type === 1 ? '漫画' : '图集' }}
              </div>
            </div>
            <div class="info">
              <div>
                <div class="title cursor-pointer" @click="handDetail(item)">
                  {{ item.name }}
                </div>
                <div class="cell-one">
                  <span>点击次数：{{ item.view }}</span>
                  <span>收藏量：{{ item.coll_count }}</span>
                  <span>收益笔数：{{ item.buy_count }}</span>
                </div>
                <div class="cell-two">
                  <div>
                    <span>单价：{{ item.price }}元</span>
                    <span>累计收益：{{ item.price * item.buy_count }}元</span>
                  </div>
                  <n-button
                    v-if="item.auditStatus === 'AUDIT_REJECT'"
                    class="down-btn"
                    quaternary
                    @click.stop="handEdit(item)"
                  >
                    编辑
                  </n-button>
                  <n-button
                    v-else-if="item.netdisk"
                    class="down-btn"
                    quaternary
                    @click.stop="handDown(item)"
                  >
                    下载
                  </n-button>
                </div>
                <div class="date">{{ item.create_at }}</div>
              </div>
              <div class="flex align-center">
                <div class="status" :style="{ color: item.status_color }">
                  <span>{{ item.status_name }}</span>
                  <span v-if="item.auditStatus === 'ERROR'">
                    :{{ item.reson }}
                  </span>
                </div>
                <n-button
                  type="primary"
                  style="margin-left: 12px"
                  quaternary
                  @click.stop="handList(item)"
                >
                  {{ item.book_type === 1 ? '章节列表' : '图片列表' }}
                </n-button>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <n-pagination
            v-model:page="tableInfo.queryForm.current"
            :page-count="tableInfo.total"
            :page-sizes="tableInfo.pageSizes"
            show-quick-jumper
            show-size-picker
            @updatePage="pageChange"
            @updatePageSize="sizeChange"
          ></n-pagination>
        </div>
      </n-spin>
    </template>
    <down-pop ref="downRef" />
  </div>
</template>
<script setup lang="ts">
import homeApi from '@/service/api/home'
import { onActivated, ref } from 'vue'
import { getStatusColor, getStatusName } from '@/enum/orderStatusEnum'
import { useApi } from '@/hooks/useApi'
import { useRouter } from 'vue-router'
import uploadApi from '@/service/api/upload'
import emitter from '@/common/mitt/bus.ts'
defineOptions({
  name: 'UserUpload'
})
const downPop = defineAsyncComponent(
  () => import('@/views/detail/components/downPop.vue')
)
const statusList = ref([
  {
    label: '全部 (4)',
    value: ''
  },
  {
    label: '已通过 (4)',
    value: 'SUCCESS'
  },
  {
    label: '待审核 (4)',
    value: 'APPLY'
  },
  {
    label: '未通过 (0)',
    value: 'ERROR'
  },
  {
    label: '已下架 (0)',
    value: 'NOT_LISTED'
  }
])
const handDetail = (e: any) => {
  const href = router.resolve({
    path: '/detail',
    query: {
      id: e.id
    }
  })
  window.open(href.href, '_blank')
}
const getCount = async () => {
  const { data } = await uploadApi.count({
    type_id: tableInfo.queryForm.type_id || null
  })
  statusList.value = [
    {
      label: `全部 (${data.all})`,
      value: ''
    },
    {
      label: `已通过 (${data.success})`,
      value: 'SUCCESS'
    },
    {
      label: `待审核 (${data.apply})`,
      value: 'APPLY'
    },
    {
      label: `未通过 (${data.error})`,
      value: 'ERROR'
    },
    {
      label: `已下架 (${data.not_listed})`,
      value: 'NOT_LISTED'
    }
  ]
}
const downRef = ref()
const handDown = (item: any) => {
  downRef.value.open(toRaw(item))
}
const router: any = useRouter()
const handEdit = (e: any) => {
  router.push({
    path: '/user/publish',
    query: {
      id: e.id
    }
  })
}
const tabChange = (e: number) => {
  if (e === 0) {
    tableInfo.queryForm.type_id = ''
  } else {
    tableInfo.queryForm.type_id = e
  }
  getCount()
  queryData()
}

const tagChange = (e: any) => {
  tableInfo.queryForm.status = e.value
  queryData()
}

const { tableInfo, queryData, fetchData, pageChange, sizeChange } = useApi({
  isPaging: true,
  isRequest: true,
  getData: uploadApi.list,
  dataMap: (data: any) => {
    return data.map((el: any) => {
      el.status_name = getStatusName(el.status)
      el.status_color = getStatusColor(el.status)
      return el
    })
  },
  initForm: {
    type_id: '',
    status: '',
    order: 'create_at',
    orderType: 'desc'
  }
})

interface filterItem {
  id: number | null
  name: string
}

const clasifyList = ref<filterItem[]>([])
const getClassify = async () => {
  const { data } = await homeApi.tabs()
  clasifyList.value = data
}
onActivated(() => {
  getClassify()
  fetchData()
  getCount()
})

onMounted(() => {
  // @ts-ignore
  emitter.on('addsuccess', () => {
    queryData()
  })
  emitter.on('editsuccess', () => {
    fetchData()
  })
})
onBeforeMount(() => {
  emitter.off('addsuccess')
  emitter.off('editsuccess')
})
</script>

<style scoped lang="scss">
.upload-page {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  padding: 15px 24px;
  display: flex;
  flex-direction: column;
  .btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    .btn {
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      padding: 0 12px;
      height: 32px;
    }
  }
  .empty {
    margin-top: 150px;
    padding-bottom: 35vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon {
      width: 164px;
      height: 164px;
    }
  }
  .list {
    min-height: 300px;
    margin-top: 0;
    flex: 1;
    overflow-y: auto;
    .card {
      padding: 25px 0;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      .cover {
        width: 206px;
        position: relative;
        img {
          width: 100%;
          aspect-ratio: 4/2.8;
          border-radius: 12px;
          object-fit: cover;
        }
        .tag {
          position: absolute;
          bottom: 10px;
          right: 10px;
          padding: 4px 8px;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
        }
      }
      .info {
        flex: 1;
        margin-left: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .status {
          font-size: 14px;
          font-weight: 400;
          color: #54c417;
        }
        .title {
          font-size: 16px;
          font-weight: 500;
          color: #333333;
        }
        .cell-one {
          margin-top: 10px;
          display: flex;
          align-items: center;
          span {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            margin-right: 40px;
          }
        }
        .cell-two {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            margin-right: 31px;
          }
          .down-btn {
            font-size: 14px;
            font-weight: 400;
            color: #f1423d;
          }
        }
        .date {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
  .pagination {
    padding: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
